<template>
  <div>
    <div class="zss_mycontent">
        <Row :gutter="15">
            <Col span="17" offset="3">
                <Col span="16">
                    <div class="zss_left">
                        <Tabs>
                            <TabPane label="待办" icon="social-apple">

                              <Table highlight-row ref="currentRowTable" :columns="columns3" :data="data1"></Table>
                            </TabPane>
                            <TabPane label="已办" icon="social-windows">标签二的内容</TabPane>
                            <TabPane label="逾期" icon="social-tux">标签三的内容</TabPane>
                        </Tabs>
                    </div>
                </Col>
                <Col span="8">
                    <div class="zss_right">
                        <Col span="12" :style="{padding:'8px'}">
                          <i-circle :percent="100">
                            <span class="demo-Circle-inner" style="font-size:24px">230</span>
                            <p class="demo-Circle-inner" style="font-size:12px">总任务</p>
                          </i-circle>
                        </Col>
                        <Col span="12" :style="{padding:'8px'}">
                          <i-circle :percent="200/230*100" stroke-color="#5cb85c">
                            <span class="demo-Circle-inner" style="font-size:24px">200</span>
                            <p class="demo-Circle-inner" style="font-size:12px">已完成</p>
                          </i-circle>
                        </Col>
                        <Col span="12" :style="{padding:'8px'}">
                          <i-circle :percent="4/230*100" stroke-color="#ff5500">
                            <span class="demo-Circle-inner" style="font-size:24px">4</span>
                            <p class="demo-Circle-inner" style="font-size:12px">已逾期</p>
                          </i-circle>
                        </Col>
                        <Col span="12" :style="{padding:'8px'}">
                          <i-circle :percent="113/230*100" stroke-color="rgb(255, 213, 114)">
                            <span class="demo-Circle-inner" style="font-size:24px">10</span>
                            <p class="demo-Circle-inner" style="font-size:12px">已失效</p>
                          </i-circle>
                        </Col>
                    </div>
                </Col>
           </Col>
        </Row>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'my',
    data () {
      return {
        columns3: [
          {
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            title: '任务名称',
            key: 'name'
          },
          {
            title: '责任人',
            key: 'age'
          },
          {
            title: '时间',
            key: 'date'
          }
        ],
        data1: [
          {
            name: '项目原型搭建',
            age: 18,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          },
          {
            name: '项目人员组织',
            age: 24,
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: '项目拆分',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },
          {
            name: '项目硬件采购',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          }
        ]
      }
    }
  }
</script>
<style scoped>
    .zss_mycontent{
        padding:20px;
        overflow: hidden;
    }
    .zss_left{
        background: white;
        padding:10px;
        border-radius: 5px;
        overflow: hidden;
    }
    .zss_right{
        background: white;
        border-radius: 5px;
        overflow: hidden;
    }
    .zss_topleft,.zss_topright,.zss_bottomleft,.zss_bottomright{
        height: 100px;
        text-align: center;
        padding:10px;
    }
    .zss_topleft{
        border-right: 1px solid #E4E4E4;
    }
    .zss_bottomleft,.zss_bottomright{
        border-top: 1px solid #E4E4E4;
    }
    .zss_bottomleft{
        border-right: 1px solid #E4E4E4;
    }
</style>
